<template>
    <section>
    	    <el-button style="float: right;" type="primary" @click="submitFrom">查询</el-button>
   			
   			<el-form ref="form" :model="form" label-width="80px">
   				 	
   				 	<el-form-item >
   				 	<!--季度-->
				    <el-select v-model="form.form2.quarterId" placeholder="选择季度" v-show="showType ===3">
					    <el-option
					      v-for="item in options"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					  </el-select>
					  <!--季度-->
   				 		
   				 		<!--年份-->
					   <el-date-picker
					   	v-if="activeName==='four'||activeName==='five'"
					   	 v-show = "showType ===1||showType ===3"
					      v-model="form.form2.yearId"
					      type="year"
					      value-format = "yyyy"
					  	>
					    </el-date-picker>
					    <!--年份-->
					    <!--月份-->
					    <el-date-picker
					   	  v-if="activeName==='four'||activeName==='five'"
					   	  v-show = "showType ===2"
					      v-model="form.value4"
					      type="month"
					      @change="wwww"
					      value-format="yyyy-MM"
					  	>
					    </el-date-picker>
				    	<!--月份-->
				   </el-form-item>
				   <!--业务统计的月份-->
   					<el-date-picker
				    	v-if="activeName!='four'&& activeName!='five'"
					      v-model="form.value3"
					      type="month"
					      placeholder="选择月份"
					      value-format = "yyyy-MM"
					     >
					 </el-date-picker>
   				  <!--业务统计的月份-->
   				  <el-form-item v-if="activeName==='first'" label="部门">
				    <el-input v-model="form.branName"></el-input>
				  </el-form-item>
				  
				  <el-form-item v-if="activeName==='second'" label="人员名称">
				    <el-input v-model="form.peopleName"></el-input>
				  </el-form-item>
				  
				 <el-form-item  v-if="activeName==='third'" label="案件状态">
				    <el-select v-model="form.mySelect" placeholder="请选择案件状态">
				      <el-option label="未办理" value="0"></el-option>
				      <el-option label="办理中" value="1"></el-option>
				      <el-option label="已办理" value="2"></el-option>
				    </el-select>
				  </el-form-item>
				  
				   <el-form-item style="float: left;" v-if="activeName==='four'||activeName==='five'" label="统计方式">
				    <el-radio-group v-model="form.form2.groupByType">
				      <el-radio @change="changeType('year',1)" label="1" >年度</el-radio>
				      <el-radio @change="changeType('year',3)" label="2" >季度</el-radio>
				      <el-radio @change="changeType('month',2)" label="3" >月份</el-radio>
				    </el-radio-group>
				  </el-form-item>
  			</el-form>
        
    </section>
</template>

<script>
    
    export default {
    	props:{
    		activeName:'',
    	},
        data() {
          return {
          	dateType:'daterange',
          	showType :1,
          	form:{
          		branName:'',
          		peopleName:'',
          		mySelect:'',
          		myRadio:'',
          		value3:'',
          		value4:'',
          		value5:'',
          		form2:{
          			groupByType:'',
          			quarterId :'',
					yearId:'',
					monthId :'',
          		}
          	},
          	options:[
          		{
		          value: '1',
		          label: '第一季'
		        },
		        {
		          value: '2',
		          label: '第二季'
		        },
		        {
		          value: '3',
		          label: '第三季'
		        },
		        {
		          value: '4',
		          label: '第四季'
		        }
          	],
          
          }
        },
        methods: {
        	submitFrom(){/*查询*/
        		if(this.form.form2.groupByType==='2'){
        			this.form.value5 = this.options[Number(this.form.form2.quarterId)-1];
        		}
        		this.$emit("submitFrom",this.form);
        	},
        	changeType(val,type){/*选择类型*/
        		this.dateType = val;
        		this.showType = type;
        	},
        	wwww(val){/*更改月份*/
        		console.log(val);
        		this.form.form2.yearId = val.split('-')[0];
        		this.form.form2.monthId = val.split('-')[1];
        		console.log(this.form.form2);
        	}
        },
        computed:{
//      	computType(){
//      		return this.dateType==='year'?'yyyy':'yyyy-M';
//      	}
        }
  };
</script>

<style scoped="scoped">
    .el-form-item{
    	float: right;
    }
    .el-form-item:nth-child(1){
    	margin-right: 15px;
    }
    .el-input{
    	float: right;
    	margin-left:15px;
    }
</style>